
<template>
  <div class="app-container">
    <el-input v-model="sender" placeholder="请输入昵称" class="input-margin short-input" />
    <br>
    <el-input v-model="content" placeholder="请输入内容" class="input-margin" />
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark" /></el-col>

      <el-button type="primary" @click="sendMsg">发送</el-button>
      <!--<el-button type="primary" @click=clearMsg>清除历史信息</el-button> -->
    </el-row>
    <el-table
      v-if="testdata"
      :data="testdata"
      style="width: 100%"
    >
      <el-table-column
        prop="sender"
        label="发送者"
        width="180"
      />
      <el-table-column
        prop="content"
        label="内容"
        width="380"
      />
      <el-table-column
        prop="time"
        label="时间"
      />
    </el-table>
  </div>

</template>

<script>
import Axios from 'axios'

export default {
  name: 'Chat',
  data() {
    return {
      testdata: [],
      sender: '',
      content: '',
      ip: '10.25.20.18'
    }
  },
  created() {
    Axios.get('http://' + this.ip + ':8080/message').then(res => {
      this.testdata = res.data.reverse()
      // console.log(this.testdata)
    })
    setInterval(() => {
      Axios.get('http://' + this.ip + ':8080/message').then(res => {
        this.testdata = res.data.reverse()
        // console.log(this.testdata)
      })
    }, 1000)
  },
  mounted() {
  },
  methods: {
    sendMsg() {
      const formData = new FormData()
      formData.append('sender', this.sender)
      formData.append('receiver', 'user')
      formData.append('content', this.content)
      formData.append('time', new Date().toLocaleString())
      Axios.post('http://' + this.ip + ':8080/message', formData).then(res => {
        console.log(res)
        this.content = ''
      })
    },
    clearMsg() {
      Axios.get('http://' + this.ip + '/message/delete').then(res => {
        console.log(res)
      })
    }
  }
}
</script>

  <style scoped>
  .input-margin {
    margin-bottom: 10px;  /* 调整这个值来改变空白的大小 */
  }

  .short-input {
    width: 130px;  /* 调整这个值来改变输入框的宽度 */
  }

  .middle-input {
    width: 700px;  /* 调整这个值来改变输入框的宽度 */
  }
  </style>
